<template>
	<div class="flex align-center staff-select">
		<lay-input :disabled="disabled" :placeholder="placeholder" v-model="data" :readonly="true" @dblclick="showStaffSelect"></lay-input>
		<lay-button :disabled="disabled" type="default" @click="showStaffSelect"><lay-icon type="icon-dr-search" prefix="iconfont"></lay-icon></lay-button>
	</div>
	<!-- 弹窗 -->
	<lay-layer v-model="visible" title="选择数据" :shade-opacity="0.5" :shade-close="false" :area="area" :btn="action">
		<div class="padding pop-staff">
			<!-- 搜索框 -->
			<pol-search :form="searchForm" :schema="searchSchema" @search="search">
				<template #btnSlot>
					<slot name="btnSlot"></slot>
				</template>
			</pol-search>

			<!-- 表格 -->
			<pol-table class="margin-top" ref="popTableRef" v-bind="tableOpt">
				<template #IsDef="{ row }">
					<span :class="row.IsDef ? 'text-green' : ''">{{row.IsDef ? '是' : '否'}}</span>
				</template>
			</pol-table>
		</div>
	</lay-layer>
</template>

<script setup>
	import { ref, reactive, getCurrentInstance, watch, nextTick } from 'vue';
	import polSearch from '@/components/polSearch/polSearch.vue'; //搜索框组件
	import polTable from '@/components/polTable/polTable.vue'; //表格组件
	const { proxy } = getCurrentInstance();
	const emits = defineEmits(['click']);

	const props = defineProps({
		//已选的值
		modelValue: {
			type: String,
			default: '',
		},
		//placeholder
		placeholder: {
			type: String,
			default: '双击表单或点击右侧按钮，选择员工'
		},
		//是否为多选
		isMultiSelect: {
			type: Boolean,
			default: true,
		},
		//禁用表单
		disabled: {
			type: Boolean,
			default: false
		},
		//当前操作的事件
		opType: {
			type: String,
			default: '',
		},
		//额外的搜索条件
		searchData: {
			type: Object,
			default: ()=>{
				return {}
			}
		}
	});

	const data = ref(props.modelValue);
	const visible = ref(false);
	const popTableRef = ref(null); //表格ref
	const area = ref(['1000px', '680px'])
	//搜索数据
	const searchFormData = {
		//员工
		Staff: {
			StaffCode: '', //员工工号
			StaffName: '', //姓名
			DeptID: '', //部门ID
		},
		//配送地址
		recAddress: {
			Receiver: '', //收货人
			Tel: '', //联系电话
			Status: 1, //状态
		}
	}

	const searchSchemaData = {
		//员工
		Staff: {
			StaffCode: {
				label: '工号',
				type: 'input',
				props: {
					type: 'text',
					placeholder: '扫描卡(工)号',
				},
				colProps: {
					md: 6,
				},
			},
			StaffName: {
				label: '姓名',
				type: 'input',
				props: {
					type: 'text',
					placeholder: '姓名',
				},
				colProps: {
					md: 6,
				},
			}
		},
		//配送地址
		recAddress: {
			Receiver: {
				label: '收货人',
				type: 'input',
				props: {
					type: 'text',
					placeholder: '收货人',
				},
				colProps: {
					md: 8,
				},
			},
			Tel: {
				label: '联系电话',
				type: 'input',
				props: {
					type: 'text',
					placeholder: '联系电话',
				},
				colProps: {
					md: 8,
				},
			},
		}
	}

	const searchForm = ref({});

	//搜索配置
	const searchSchema = ref({});

	//表格配置
	const columns = ref([]),
		url = ref('');
	if (props.opType == 'cardgrant') {
		//卡号
		url.value = 'basic.getStaffList';
		columns.value = [
			{ title: '员工工号', width: '120px', key: 'StaffCode', align: 'center' },
			{ title: '员工姓名', width: '120px', key: 'StaffName' },
			{ title: '所属部门', key: 'DeptName' },
			{ title: '员工类别', width: '110px', key: 'StaffTypeName', align: 'center' },
			{ title: '员工状态', width: '80px', key: 'StaffStateName', align: 'center' },
			{ title: '电话', key: 'Tel', width: '150px', align: 'center' },
		];
		searchForm.value = searchFormData.Staff
		searchSchema.value = searchSchemaData.Staff
	} else if (props.opType == 'recAddress') {
		//配送地址
		url.value = 'orderMeal.getStaffAddress';
		columns.value = [
			{ title: '收货人', key: 'Receiver', width: '120px', align: 'center' },
			{ title: '联系电话', key: 'Tel', width: '150px', align: 'center' },
			{ title: '收货地址', key: 'Address', align: 'left', ellipsisTooltip: true },
			{ title: '是否为默认地址', key: 'IsDef', width: '130px', align: 'center', customSlot: 'IsDef' },
			// { title: '状态', key: 'StatusDesc', width: '100px', align: 'center' },
			{ title: '备注', key: 'Remark', align: 'left', ellipsisTooltip: true }
		];
		searchForm.value = searchFormData.recAddress
		searchSchema.value = searchSchemaData.recAddress
		area.value = ['1200px', '680px']
	} else {
		//员工
		url.value = 'cardBiz.getStaffCardPages';
		columns.value = [
			{ title: '员工工号', key: 'StaffCode', align: 'center', width: '120px' },
			{ title: '员工姓名', key: 'StaffName', align: 'center', width: '120px' },
			{ title: '所属部门', key: 'DeptName' },
			{ title: '卡号', key: 'CardNo' },
			{ title: '卡类型', key: 'CardTypeName', width: '100px' },
			{ title: '状态', key: 'StatusDesc', width: '100px', align: 'center' },
		];
		searchForm.value = searchFormData.Staff
		searchSchema.value = searchSchemaData.Staff
	}
	
	searchForm.value = {...searchForm.value, ...props.searchData}	//合并额外的搜索条件

	//为单选
	if (!props.isMultiSelect) {
		columns.value.unshift({ title: '选项', width: '55px', type: 'radio', fixed: 'left' });
	} else {
		columns.value.unshift({ title: '选项', width: '55px', type: 'checkbox', fixed: 'left' });
	}
	//表格配置
	const tableOpt = ref({
		url: url.value, //表格数据api
		columns: columns.value,
		search: searchForm.value,
		defaultToolbar: false,
		height: '435px',
		showPermissionBtn: false,
		page: { current: 1, limit: 8, total: 0, limits: [8, 10, 20, 30, 50] },
	});

	const action = ref([{
			text: '确定',
			callback: () => {
				const list = popTableRef.value.getSelectData();
				if (!list || list.length == 0) {
					proxy.$msg.warning(`请选择一条数据！`);
					return false;
				}
				emits('click', list);
				visible.value = !visible.value;
			},
		},
		{
			text: '取消',
			callback: () => {
				visible.value = !visible.value;
			},
		},
	]);

	// 监听props.value的变化
	watch(
		() => props.modelValue,
		(newValue, oldValue) => {
			data.value = newValue;
		}
	);
	//搜索
	function search() {
		popTableRef.value.search();
	}

	function showStaffSelect() {
		visible.value = !visible.value;
	}

	defineExpose({
		search, //查询方法
		showStaffSelect
	});
</script>

<style lang="scss">
	.staff-select {
		.layui-btn {
			background-color: #fafafa;
			border-left: 1px solid var(--input-border-color);
			display: flex;
			flex: none;
			align-items: center;
			padding: 0 12px;
			margin-left: -2px;
			cursor: pointer;
		}
	}

	.pop-staff {
		.search-box {
			height: 80px;
			padding: 0;
			margin: 0;

			.serch-from {
				padding: 0 !important;
				height: 40px !important;
			}

			.existence-search-box {
				bottom: 0;
				padding-left: 40px;
			}
		}
	}
</style>